<template>
	<view class="head flex-row">
		<xbc-avatar :src="user?.avatar" />
		<text class="name">{{ user?.name }}</text>
	</view>
	<view class="row flex-row">
		<text class="label">加入黑名单</text>
		<switch :checked="user?.isBlack ? true : false" style="transform:scale(0.6) translateX(40rpx)" disabled />
	</view>
	<view class="space"></view>
	<view @tap="sendMessage" v-if="from == 'list'" class="btn flex-column">发送消息</view>
	<view @tap="clearMessage" class="btn flex-column">清空聊天记录</view>
</template>

<script lang="ts" setup>
import { ref, getCurrentInstance, onMounted } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import XBCIM from 'xbcim'

const user = ref({})
const from = ref('')
const eventChannel = ref(null)

function clearMessage() {
	uni.showModal({
		title: '提示',
		content: '是否确认清空聊天记录',
		success(res){
			if(res.cancel) return
			const { conversationId, type } = uni.getStorageSync('currentConversation')
			XBCIM.clearConversation({
				conversationId,
				conversationType: type
			}).then(() => {
				eventChannel.value.emit('clearMessage')
				uni.showToast({
					icon: 'none',
					title: '聊天记录删除成功'
				})
			}).catch(() => {
				uni.showToast({
					icon: 'none',
					title: '聊天记录删除失败'
				})
			})
		}
	})
}

async function sendMessage() {
	const conversation = await XBCIM.getConversationDetail({
		conversationType: XBCIM.CONVERSATION_TYPE.SINGLE,
		userId: user.value.userId
	})
	uni.setStorageSync('currentConversation', conversation)
	uni.redirectTo({
		url: `/pages/chat/single?id=${conversation?.conversationId}`
	})
}

onLoad(async ({ userId, source }) => {
	from.value = source
	user.value = await XBCIM.getUserProfile({ userId })
})

onMounted(() => {
	const instance = getCurrentInstance().proxy
	eventChannel.value = instance?.getOpenerEventChannel()
})
</script>

<style lang="scss" scoped>
.space {
	height: 20rpx;
	margin: 30rpx 0 100rpx;
	background-color: #f5f5f5;
}
.btn {
	color: red;
	height: 80rpx;
	margin: 40rpx;
	font-size: 32rpx;
}

.row {
	height: 92rpx;
	padding: 0 40rpx;
	
	.label {
		font-size: 30rpx;
	}
	
	.iconfont {
		color: #666;
		font-size: 36rpx;
	}
}

.head {
	padding: 20rpx 40rpx;
	margin-bottom: 20rpx;
	justify-content: flex-start;
	
	.name {
		font-size: 32rpx;
		font-weight: bold;
		margin-left: 30rpx;
	}
}
</style>